<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>login</title>

<link href="login.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function check()
{
        $.get("login.php",{ username:$('#username').val(),password:$('#password').val() },function(data)
        { 
		  //alert(data);
		  var obj = jQuery.parseJSON(data);
		  if(obj.status=='OK') //if correct login detail
          {          
              //redirect to secure page
              document.location='secure.php';
          }
          else
          {
              alert('Your login failed...');
			  return false;
		  }	
		});		  
};//not to post the form physically      
                      
</script>   

</head>
<body>
<div id="header" class="center">
</div>
<!--header-->

<div id="login" class="center">
  <div id="form" class="center">
    <form action="login.php" method="GET" id="login_form">
      <strong> Username: </strong>
      <input type="text" size="20" name="username" id="username"/>
      <br />
      <strong> Password: </strong>
      <input type="password" size="20" name="password" id="password"/>
      <br />
      <input type="button" name="login" value="Login" onclick="check()"/>
    </form>
	
  </div><!--form-->
</div>
<!--login-->
</body>
</html>